<template>
    <el-dialog :title="action == 'add' ? '新增' : '编辑'"  :model-value="show" @update:model-value="handleValueUpdate"
        @close="handleClose">
        <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
        <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
        <el-checkbox v-model="menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
        <el-tree class="tree-border" :data="menuList" show-checkbox ref="menuRef" node-key="_id"
            :check-strictly="!menuCheckStrictly"  default-expand-all  empty-text="加载中，请稍候"
            :props="{ label: 'menuName', children: 'children' }"></el-tree>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, defineProps, getCurrentInstance, onMounted } from 'vue'
const menuExpand = ref(true);
const menuNodeAll = ref(false);
const menuCheckStrictly = ref(true);
const menuRef = ref(null);

/** 树权限（展开/折叠）*/
function handleCheckedTreeExpand(value) {
    let treeList = menuList.value;
    for (let i = 0; i < treeList.length; i++) {
        menuRef.value.store.nodesMap[treeList[i]._id].expanded = value;
    }
}

const handleCheckedTreeConnect = (value) => {
    menuCheckStrictly.value = value ? true : false;
}
function handleCheckedTreeNodeAll(value) {
    menuRef.value.setCheckedNodes(value ? menuList.value : []);
}

/** 所有菜单节点数据 */
function getMenuAllCheckedKeys() {
    // 目前被选中的菜单节点
    let checkedKeys = menuRef.value.getCheckedKeys();
    // 半选中的菜单节点
    let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);

    return { checkedKeys, halfCheckedKeys };
}

const { proxy } = getCurrentInstance();
const $Tajax = proxy.$Tajax;
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    action: {
        type: String,
        default: 'add'
    },
    Item: {
        type: Object,
        default: ''
    },

})
const emit = defineEmits(['update:show'])
const FormData = ref({
    roleName: null,
    roleCode: null,
    remark: null,
})
onMounted(() => {
    console.log(props.Item)
    if (props.action == 'edit') {
        FormData.value = props.Item
        menuCheckStrictly.value = props.Item.menuCheckStrictly
       
    }
    getMenuList()
})

const menuList = ref([]) // 部门列表
const getMenuList = async () => {
    let res = await $Tajax.getMenuList();
    menuList.value = res
     // 设置树节点的初始选中状态
    if (props.Item&&props.Item.permissionList && props.Item.permissionList.checkedKeys) {
        menuRef.value.setCheckedKeys(props.Item.permissionList.checkedKeys);
    }
}


const handleValueUpdate = (val) => {
    emit('update:show', val)
}
const submitForm = async () => {
    const { checkedKeys, halfCheckedKeys } = getMenuAllCheckedKeys();
    console.log({ 1: checkedKeys }, { 2: halfCheckedKeys });
    let params = {
        _id: props.Item._id,
        menuCheckStrictly: menuCheckStrictly.value,
        permissionList: {
            checkedKeys,
            halfCheckedKeys: halfCheckedKeys,
        },
    };
    await proxy.$Tajax.updatePermission(params);
    proxy.$message.success("设置成功");
    emit('update:show', false)
    // let nodes = tree.getCheckedNodes();
    // let halfKeys = tree.getHalfCheckedKeys();
    // let checkedKeys = [];
    // let parentKeys = [];
    // nodes.map((node) => {
    //     if (!node.children) {
    //         checkedKeys.push(node._id);
    //     } else {
    //         parentKeys.push(node._id);
    //     }
    // });
    // let params = {
    //     _id: Item._id,
    //     permissionList: {
    //         checkedKeys,
    //         halfCheckedKeys: parentKeys.concat(halfKeys),
    //     },
    // };
    // console.log(params);
    //   await this.$Tajax.updatePermission(params);
    //   this.showPermission = false;
    //   this.$message.success("设置成功");
    //   this.getRoleList();
}

const handleClose = () => {
    emit('update:show', false)
}


</script>

<style></style>